<template>
  <div class="detail-page">
    <!-- 返回按钮 -->
    <div class="back-header">
      <el-button @click="$router.back()" icon="ArrowLeft">返回</el-button>
    </div>

    <div class="detail-container" v-loading="loading">
      <!-- 活动基本信息 -->
      <div class="detail-header">
        <h1>{{ event.name }}</h1>
        <div class="meta-info">
          <span class="time">
            <el-icon>
              <Calendar />
            </el-icon>
            {{ formatDateTime(event.date) }}
          </span>
          <span class="location">
            <el-icon>
              <Location />
            </el-icon>
            {{ event.location }}
          </span>
          <span class="duration">
            <el-icon>
              <Timer />
            </el-icon>
            120分钟
          </span>
          <span class="status" :class="{ ended: isEventEnded(event.date) }">
            <el-icon>
              <CircleCheck />
            </el-icon>
            {{ isEventEnded(event.date) ? '已结束' : '进行中' }}
          </span>
        </div>
      </div>

      <!-- 活动统计信息 -->
      <div class="event-stats">
        <div class="stat-item">
          <div class="stat-value">{{ event.likes_count || 0 }}</div>
          <div class="stat-label">获赞</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">{{ event.favorites_count || 0 }}</div>
          <div class="stat-label">收藏</div>
        </div>
      </div>

      <!-- 活动描述 -->
      <div class="detail-section">
        <div class="section-header">
          <h2>活动介绍</h2>
          <div class="divider"></div>
        </div>
        <p class="description-text">{{ event.description }}</p>
      </div>

      <!-- 活动图片 -->
      <div class="detail-section" v-if="event.image_url && event.image_url.length > 0">
        <div class="section-header">
          <h2>活动图片</h2>
          <div class="divider"></div>
        </div>
        <div class="image-gallery">
          <el-image v-for="(url, index) in event.image_url" :key="index" :src="'http://localhost:3000' + url"
            :preview-src-list="event.image_url.map((url) => 'http://localhost:3000' + url)" fit="cover"
            class="event-image">
            <template #placeholder>
              <div class="image-placeholder">
                <el-icon>
                  <Picture />
                </el-icon>
              </div>
            </template>
          </el-image>
        </div>
      </div>

      <!-- 活动亮点 -->
      <div class="detail-section">
        <div class="section-header">
          <h2>活动亮点</h2>
          <div class="divider"></div>
        </div>
        <div class="highlights-container">
          <div class="highlights-grid">
            <div class="highlight-item">
              <el-icon class="highlight-icon">
                <Trophy />
              </el-icon>
              <h3>专业指导</h3>
              <p>资深专家现场指导，确保活动质量</p>
            </div>
            <div class="highlight-item">
              <el-icon class="highlight-icon">
                <PictureFilled />
              </el-icon>
              <h3>活动记录</h3>
              <p>专业摄影跟拍，留下精彩瞬间</p>
            </div>
            <div class="highlight-item">
              <el-icon class="highlight-icon">
                <Goods />
              </el-icon>
              <h3>精美礼品</h3>
              <p>参与即可获得精美纪念品</p>
            </div>
            <div class="highlight-item">
              <el-icon class="highlight-icon">
                <Service />
              </el-icon>
              <h3>贴心服务</h3>
              <p>全程专人服务，无微不至</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 活动须知 -->
      <div class="detail-section">
        <div class="section-header">
          <h2>活动须知</h2>
          <div class="divider"></div>
        </div>
        <div class="notice-list">
          <div class="notice-item">
            <el-icon>
              <InfoFilled />
            </el-icon>
            <span>请提前15分钟到达活动地点</span>
          </div>
          <div class="notice-item">
            <el-icon>
              <InfoFilled />
            </el-icon>
            <span>请携带身份证等有效证件</span>
          </div>
          <div class="notice-item">
            <el-icon>
              <InfoFilled />
            </el-icon>
            <span>活动期间请遵守现场工作人员指引</span>
          </div>
          <div class="notice-item">
            <el-icon>
              <InfoFilled />
            </el-icon>
            <span>如需取消参与，请提前24小时告知</span>
          </div>
        </div>
      </div>

      <!-- 交互操作栏 -->
      <div class="action-bar">
        <div class="action-buttons">
          <el-button :type="event.is_liked ? 'primary' : 'default'" @click="handleLike" size="large" :icon="Star"
            class="action-button" :class="{ 'is-active': event.is_liked }">
            <span class="button-text">点赞</span>
            <span class="count">{{ event.likes_count }}</span>
          </el-button>
          <el-button :type="event.is_favorited ? 'primary' : 'default'" @click="handleFavorite" size="large"
            :icon="Collection" class="action-button" :class="{ 'is-active': event.is_favorited }">
            <span class="button-text">收藏</span>
            <span class="count">{{ event.favorites_count }}</span>
          </el-button>
          <el-button @click="handleShare" size="large" :icon="Share" class="action-button share-button">
            <span class="button-text">分享</span>
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Calendar,
  Location,
  Star,
  Collection,
  Share,
  ArrowLeft,
  Timer,
  CircleCheck,
  Trophy,
  PictureFilled,
  Goods,
  Service,
  Picture,
  InfoFilled,
} from '@element-plus/icons-vue'
import api from '@/api'

const route = useRoute()
const eventId = route.params.id
const event = ref({})
const loading = ref(true)

// 格式化日期时间
const formatDateTime = (dateString) => {
  const date = new Date(dateString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  })
}

// 获取活动详情
const fetchEventDetail = async () => {
  loading.value = true
  try {
    const response = await api.get(`/events/${eventId}`)
    event.value = response.data
  } catch (error) {
    ElMessage.error('获取活动详情失败')
  } finally {
    loading.value = false
  }
}

// 点赞
const handleLike = async () => {
  try {
    await api.post(`/events/${eventId}/like`)
    await fetchEventDetail()
    ElMessage.success(event.value.is_liked ? '点赞成功' : '取消点赞成功')
  } catch (error) {
    ElMessage.error('操作失败')
  }
}

// 收藏
const handleFavorite = async () => {
  try {
    await api.post(`/events/${eventId}/favorite`)
    await fetchEventDetail()
    ElMessage.success(event.value.is_favorited ? '操作成功' : '操作成功')
  } catch (error) {
    ElMessage.error('操作失败')
  }
}

// 分享
const handleShare = () => {
  if (navigator.clipboard) {
    navigator.clipboard.writeText(event.value.share_url)
    ElMessage.success('链接已复制到剪贴板')
  } else {
    ElMessage.error('您的浏览器不支持自动复制')
  }
}

// 检查活动是否已结束
const isEventEnded = (date) => {
  const eventDate = new Date(date)
  eventDate.setHours(23, 59, 59, 999)
  return eventDate < new Date()
}

onMounted(() => {
  fetchEventDetail()
})
</script>

<style scoped>
.detail-page {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding: 20px;
}

.back-header {
  max-width: 1200px;
  margin: 0 auto 20px;
}

.detail-container {
  max-width: 1200px;
  margin: 0 auto;
  background: white;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.detail-header {
  text-align: center;
  margin-bottom: 40px;
  padding-bottom: 30px;
  border-bottom: 1px solid #eee;
}

.detail-header h1 {
  font-size: 2.5em;
  color: #2c3e50;
  margin-bottom: 20px;
}

.meta-info {
  display: flex;
  justify-content: center;
  gap: 30px;
  color: #666;
}

.meta-info span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-section {
  margin-bottom: 30px;
}

.detail-section h2 {
  font-size: 1.5em;
  color: #2c3e50;
  margin-bottom: 15px;
}

.image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 30px;
  width: 100%;
}

.event-image {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.event-image:hover {
  transform: translateY(-5px);
}

.image-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
  font-size: 24px;
}

.highlights-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 30px;
}

.highlights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.highlight-item {
  text-align: center;
  padding: 24px;
  background: #f8f9fa;
  border-radius: 12px;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.highlight-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.highlight-icon {
  font-size: 36px;
  color: var(--el-color-primary);
  margin-bottom: 16px;
}

.highlight-item h3 {
  font-size: 18px;
  color: #2c3e50;
  margin-bottom: 12px;
}

.highlight-item p {
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}

.notice-list {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.notice-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  color: #666;
  border-bottom: 1px dashed #eee;
}

.notice-item:last-child {
  border-bottom: none;
}

.notice-item .el-icon {
  color: var(--el-color-warning);
  font-size: 20px;
}

.action-button {
  display: flex;
  align-items: center;
  gap: 8px;
}

.button-text {
  margin-right: 4px;
}

.count {
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 14px;
}

.action-button.is-active .count {
  background: rgba(0, 0, 0, 0.1);
}

.share-button {
  background: var(--el-color-success);
  border-color: var(--el-color-success);
  color: white;
}

.share-button:hover {
  background: var(--el-color-success-dark-2);
  border-color: var(--el-color-success-dark-2);
  color: white;
}

.action-bar {
  border-top: 1px solid #eee;
  padding-top: 20px;
  margin-top: 30px;
}

.action-buttons {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.status {
  padding: 4px 12px;
  border-radius: 4px;
  background: var(--el-color-success-light-9);
  color: var(--el-color-success);
}

.status.ended {
  background: var(--el-color-info-light-9);
  color: var(--el-color-info);
}

.event-stats {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-bottom: 40px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--el-color-primary);
  margin-bottom: 8px;
}

.stat-label {
  color: #666;
  font-size: 14px;
}

@media (max-width: 768px) {
  .detail-container {
    padding: 20px;
  }

  .action-buttons {
    flex-direction: column;
  }

  .image-gallery {
    grid-template-columns: 1fr;
  }

  .event-image {
    height: 240px;
  }

  .meta-info {
    flex-wrap: wrap;
    gap: 15px;
  }

  .event-stats {
    flex-wrap: wrap;
    gap: 20px;
  }

  .stat-item {
    width: calc(50% - 10px);
  }
}
</style>
